<template>
  <div class="other-msg">
    <template v-if="msgList.length">
      <h4>工作留言</h4>
      <ul>
        <li v-for="(item, index) in msgList" :key="index">
          <div class="item">
            <p>{{ item.be0102Name }}</p>
            <div>{{ item.fullName }}</div>
            <span>{{ item.e0404 }}</span>
          </div>
          <div class="desc">{{ item.e0403 }}</div>
        </li>
      </ul>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    msgList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.other-msg {
  h4 {
    line-height: 46px;
    font-weight: bold;
    color: #176bbc;
  }
  ul {
    li {
      margin-bottom: 12px;
      padding: 5px 20px;
      border: 1px solid #3e9fc8;
      line-height: 24px;
      .item {
        display: flex;
        align-items: center;
        line-height: 24px;
        p {
          flex: 0 0 auto;
          font-weight: bold;
        }
        div {
          flex: 1;
          font-weight: bold;
          margin: 0 16px;
        }
        span {
          flex: 0 0 auto;
          color: #666;
        }
      }
      .desc {
        margin-top: 5px;
        color: #666;
      }
    }
  }
}
</style>
